
import ClassifyNav from '@/components/News/ClassifyNav'
import Link from 'next/link'
import styles from './styles.module.scss'
import { useState } from 'react'
import { useEffect } from 'react'
import { Pagination } from 'antd';
import Recommend from '@/components/News/Recommend'
import BrocadeCollection from '@/components/News/BrocadeCollection'
import useNavData from '@/store/getters/home'
import List from '@/components/H5/News/List'
import RenderJudge from '../RenderJudge'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useMemoizedFn } from 'ahooks'

const GameVideo = ({ params: initParams, videoData, videoList, videoType, mobile }) => {
  const [data, setData] = useState(videoData)
  const [params, setParams] = useState(initParams)
  const { footballBackVideoNavList, basketballBackVideoNavList } = useNavData()
  let list = [...footballBackVideoNavList, ...basketballBackVideoNavList]?.filter(r => r?.id !== '')
  const title = ['精彩视频', '录像回放'][videoType - 1]
  const router = useRouter()
  const pageKey = 6
  useEffect(() => {
    setData(videoData)
  }, [videoData])
  useEffect(() => {
    setParams(initParams)
  }, [initParams])

  const itemRender = (page, types, originalElement) => {

    if (types === 'page') {
      return <Link href={`/marvellous/${params.en}/s${page}`}>{page}</Link>
    }
    return originalElement
  };
  const onChangePage = useMemoizedFn((page) => router.push(`/marvellous/${params.en}/s${page}`))
  return (
    <>
      <Head>
        <title>精彩体育视频_体育片段短视频_综合体育视频-鑫球体育</title>
        <meta name='description' content='鑫球体育精彩视频栏目提供全球热门的体育片段视频，包括NBA、足球、篮球、田径、兵乓球、电竞等各种精彩体育比赛集锦。看精彩比赛集锦就上鑫球体育-精彩视频栏目。' />
        <meta name="keywords" content='精彩体育视频,体育片段短视频,综合体育视频,体育短视频,足球视频集锦,NBA比赛集锦,英超比赛集锦，西甲比赛集锦' />
      </Head>
      <RenderJudge value={
        mobile
      } active={
        <List.BlockInfo recommendNewsData={data} link={(row) => `/marvellous/${params?.en}/${row?.id}`} imgKey={videoType === '1' ? 'coverImg' : 'videoImg'} />
      } inactive={
        <main className={styles.classify}>
          <section className={styles.left}>
            <p className={styles.infos}>{title}</p>
            <ClassifyNav link={`/marvellous/`} list={list} pathValue="en">
              {(row, css) => (
                <a title={row?.typeName} className={Number(params?.id) === row?.id ? css.active : null}>
                  {row?.typeName}
                </a>
              )}
            </ClassifyNav>
            <ul className={styles.list}>
              {
                data?.map(row => (
                  <Link href={`/marvellous/${params?.en}/${row?.id}`} key={row?.id}>
                    <a target="_blank" title={row?.videoName || row?.title}>
                      <img src={row?.videoImg || row?.coverImg} alt={row?.videoName || row?.title} loading="lazy" />
                      <span>
                        <p>{row?.videoName || row?.title}</p>
                        <p>{row?.createTime}</p>
                      </span>
                    </a>
                  </Link>
                ))
              }
            </ul>
            <Pagination
              defaultCurrent={1}
              defaultPageSize={params.pageSize}
              current={params.current}
              total={params.total}
              pageSize={params.pageSize}
              style={{ marginLeft: 60 }}
              showSizeChanger={false}
              showQuickJumper={true}
              itemRender={itemRender}
              hideOnSinglePage
              onChange={onChangePage}
            />
          </section>

          <aside>
            <Recommend data={videoData} link={(row) => `/marvellous/${params?.en}/${row?.id}`} />
            <blockquote style={{ height: 20 }}></blockquote>
            <BrocadeCollection title="精彩回放" data={videoList} link={row => `/marvellous/${params?.en}/${row?.id}`} />
          </aside>
        </main>
      } />
    </>
  )
}

export default GameVideo